<template>
  <div class="enter-page page">
    <div class="title">
      <span class="text">肃州区数据资源池综合分析系统</span>
    </div>
    <div class="logo">
      <img class="logo-1" src="@/assets/images/theme-blue/logo1.png" alt=""/>
      <img class="logo-2" src="@/assets/images/theme-blue/logo2.png" alt=""/>
      <img class="logo-3" src="@/assets/images/theme-blue/logo3.png" alt=""/>
      <img class="logo-4" src="@/assets/images/theme-blue/logo4.png" alt=""/>
    </div>
    <div class="left-menu menu-block">
      <div class="menu-item" v-for="item in leftMenu" :key="item.id" @click="handleRoute(item.path)" >
        <div class="menu-text">
          <div class="menu-title">{{ item.name }}</div>
          <div class="menu-sub-title">{{ item.sub }}</div>
        </div>
        <img :src="item.icon" class="menu-icon" alt=""/>
      </div>
    </div>
    <div class="right-menu menu-block">
      <div class="menu-item" v-for="item in rightMenu" :key="item.id"  @click="handleRoute(item.path)" >
        <img :src="item.icon" class="menu-icon" alt=""/>
        <div class="menu-text">
          <div class="menu-title">{{ item.name }}</div>
          <div class="menu-sub-title">{{ item.sub }}</div>
        </div>
      </div>
    </div>
    <Dialog v-if="dialogInfo.show" :info="dialogInfo">
      <embed :src="path" type="application/pdf" width="100%" height="750px" />
    </Dialog>
    <Dialog v-if="dialogInfo1.show" :info="dialogInfo1">
      <iframe src="https://udify.app/chat/UlUDrBb0YWXTCELC" style="width: 100%;min-height:750px;" frameborder="0" allow="microphone"> </iframe>
    </Dialog>
  </div>
</template>
<script>
import Dialog from "@/components/dialog/Dialog";
export default {
  components: {Dialog},
  data() {
    return {
      leftMenu: [
        {
          id: 1,
          name: '总体情况',
          sub: 'Unified management with one map',
          icon: require('@/assets/images/theme-blue/enter-icon-1.png'),
          path:'/overall'
        },
        {
          id: 2,
          name: '农业相关数据',
          sub: 'Comprehensive integration',
          icon: require('@/assets/images/theme-blue/enter-icon-2.png'),
          path:'/agriculture'
        },
        {
          id: 3,
          name: '工业相关数据',
          sub: 'Multidimensional analysis',
          icon: require('@/assets/images/theme-blue/enter-icon-3.png'),
          path:'/industry'
        },
        {
          id: 4,
          name: '在线预览',
          sub: 'Online preview',
          icon: require('@/assets/images/theme-blue/Online preview.png'),
          path:'/preview'
        },
      ],
      rightMenu: [
        {
          id: 1,
          name: '服务业相关数据',
          sub: 'Regional interconnection',
          icon: require('@/assets/images/theme-blue/enter-icon-4.png'),
          path:'/service'
        },
        {
          id: 2,
          name: '社会事业相关数据',
          sub: 'Operation monitoring',
          icon: require('@/assets/images/theme-blue/enter-icon-5.png'),
          path:'/society'
        },
        {
          id: 3,
          name: '其他',
          sub: 'Graded Insight',
          icon: require('@/assets/images/theme-blue/enter-icon-6.png'),
          path:'/other'
        },
        {
          id: 4,
          name: '综合分析',
          sub: 'Comprehensive analysis',
          icon: require('@/assets/images/theme-blue/deepseek.png'),
          path:'/analysis'
        },
      ],
      dialogInfo:{
        show:false,
        title:'在线预览',
        width: '1900px',
      },
      dialogInfo1:{
        show:false,
        title:'综合分析',
        width: '1900px',
      },
      path:'http://60.165.22.79:3032/2025_document.pdf#page='
    }
  },
  methods: {
    handleRoute(url){
      if(url === '/preview'){
        this.dialogInfo.show=true
      }else if(url === '/analysis'){
        this.dialogInfo1.show=true
      }else{
        if(url){
          this.$router.push(url);
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.enter-page {
  position: relative;
  overflow: hidden;
  cursor: pointer;
 // background: #041022;
  .title {
    position: absolute;
    transform: translate(-50%,0);
    top: 100px;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    width: 1400px;
    .text{
      font-size: 60px;
      font-weight: bold;
      color: #29F1FA;
      text-shadow: #296bfa 0 0 10px;
      font-family: 'lengku';
    }
  }

  $menuWidth: 800px;
  $menuHorizontalOffset: 30%;

  .menu-block {
    height: 500px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;

    .menu-item {

      display: flex;
      align-items: center;
      width: $menuWidth;
      height: 100px;
      $menuIconSize: 50px;
      cursor: pointer;
      margin-bottom: 20px;

      .menu-icon {
        width: $menuIconSize;
        height: $menuIconSize;
      }

      .menu-text {
        display: flex;
        flex-direction: column;
        color: #8ACAF6;
        .menu-title {
          margin-bottom: 8px;
          font-size: 26px;
        }

        .menu-sub-title {
          font-size: 18px;
        }
      }
    }
  }

  $menuPadding: 320px;
  $menuPaddingMid: 360px;

  .left-menu {
    left: $menuHorizontalOffset;

    .menu-item {
      background-image: linear-gradient(to left, #034683, rgba(0, 0, 0, 0));
      justify-content: flex-end;
      padding-right: $menuPadding;

      .menu-text {
        align-items: flex-end;
        margin-right: 20px;
      }
    }

    .menu-item:nth-child(2) {
      padding-right: $menuPaddingMid;
    }

    .menu-item:nth-child(3) {


      padding-right: $menuPadding+60px;
    }

    .menu-item:nth-child(4) {
      padding-right: $menuPaddingMid;

    }
  }

  .right-menu {
    right: calc($menuHorizontalOffset - $menuWidth);

    .menu-item {
      justify-content: flex-start;
      padding-left: $menuPadding;
      background-image: linear-gradient(to right, #034683, rgba(0, 0, 0, 0));
      .menu-text {
        margin-left: 20px;
      }
    }

    .menu-item:nth-child(2) {
      padding-left: $menuPaddingMid;
    }

    .menu-item:nth-child(3) {
      padding-left: $menuPadding+60px;
    }

    .menu-item:nth-child(4) {
      padding-left: $menuPaddingMid;
    }
  }

  $logoSize:70vh;

  .logo {
    background: #00005a;
    z-index: 1;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: $logoSize;
    height: $logoSize;
    border-radius: 50%;

    img {
      z-index: 3;
      position: absolute;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 50%;
    }

    .logo-1 {
      width: 78%;
      left: 47%;
    }

    .logo-2 {
      width: 69%;
      animation: clockwise 8s linear infinite;
    }

    .logo-3 {
      width: calc(92% - 13px);
      animation: counterclockwise 10s linear infinite;
    }

    .logo-4 {
      width: 100%;
      animation: clockwise 12s linear infinite;
    }

    @keyframes clockwise {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }
    @keyframes counterclockwise {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(-360deg);
      }
    }
  }
  .enter-button{
    color: #8ACAF6;
    font-weight: bold;
    font-size: 38px;
    position: absolute;
    transform: translate(-50%,0);
    left: 50%;
    bottom: 150px;
    z-index: 10;
    letter-spacing: 10px;
    cursor: pointer;
  }
}
</style>
